<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head th:include="common/header :: header(title = '注册')"></head>
<body>
<div id="templatemo_mobile_menu" th:include="common/mobile_menu :: mobile_menu"></div>
<div class="container_wapper clearfix" th:include="common/banner_menu :: banner_menu"></div>
<div style="height: 94px;"></div>
<div id="templatemo_about" class="container_wapper">
	<div class="container-fluid text-center">
		<h1>欢迎登陆</h1>
		<div class="col-sm-3 col-md-8 col-lg-12 about_icon text-center">
			<div class="services form" style="display: block">
				<form id="register-form" role="form" th:action="@{/register}" th:object="${user}" class="contact-form"
							method="POST">
					<div class="form-group">
						<label for="nickname">用户名</label>
						<input type="text" class="form-control" name="nickname" id="nickname" placeholder="输入用户名"/>
					</div>
					<div class="form-group">
						<label for="email">邮箱</label>
						<input type="email" name="email" id="email" placeholder="输入电子邮箱"/>
					</div>
					<div class="form-group">
						<label for="phone">性别</label>
						<div class="radio-group">
							<label for="male">男</label>
							<input type="radio" id="male" name="sex" value="1">
							<label for="female">女</label>
							<input type="radio" id="female" name="sex" value="0">
						</div>
					</div>
					<div class="form-group">
						<label for="phone">手机</label>
						<input type="text" name="phone" id="phone" placeholder="输入手机号"/>
					</div>
					<div class="form-group">
						<label for="password">密码</label>
						<input type="password" id="password" name="password" placeholder="输入密码">
					</div>
					<div class="form-group">
						<label for="password2">再次输入密码</label>
						<input type="password" id="password2" name="password2" placeholder="再次输入密码">
					</div>
					<div class="form-group">
						<input type="submit" class="button" value="注册">
					</div>
					<div class="form-group">
						<h2 id="message" th:if="${result}" th:text="${result}"></h2>
					</div>
				</form>
			</div>
		</div>
		<div class="clearfix testimonial_top_bottom_spacer"></div>
	</div>
</div><!--templatemo_about-->

<div id="templatemo_footer" th:include="common/footer :: footer"></div>
<script src="../static/js/bootstrapValidator.js"></script>
<script>
	jQuery(document).ready(function () {
		$ = jQuery;
		$('#register-form')
				.bootstrapValidator({
					message: '这个值无效',
					//live: 'submitted',
					feedbackIcons: {
						valid: 'glyphicon glyphicon-ok',
						invalid: 'glyphicon glyphicon-remove',
						validating: 'glyphicon glyphicon-refresh'
					},
					fields: {
						nickname: {
							message: '无效的用\户名',
							validators: {
								notEmpty: {
									message: '用户名不能为空'
								},
								stringLength: {
									min: 5,
									max: 30,
									message: '用户名长度大于5小于30'
								},
								regexp: {
									regexp: /^[a-zA-Z0-9_\.]+$/,
									message: '用户名只能为英文字符数组或者下划线'
								}
							}
						},
						email: {
							validators: {
								notEmpty: {
									message: '邮箱不能为空'
								},
								emailAddress: {
									message: '无效的邮箱格式'
								}
							}
						},
						phone: {
							validators: {
								notEmpty: {
									message: '手机号'
								},
								stringLength: {
									min: 11,
									max: 11,
									message: '手机号长度不对'
								},
								regexp: {
									regexp: /^[0-9]+$/,
									message: '手机号应该为数字'
								}
							}
						},
						password: {
							validators: {
								notEmpty: {
									message: '密码不能为空'
								},
								stringLength: {
									min: 5,
									max: 30,
									message: '密码长度大于5小于30'
								}
							}
						},
						password2: {
							validators: {
								notEmpty: {
									message: '密码不能为空'
								},
								identical: {
									field: 'password',
									message: '两次密码应该一致'
								},
								stringLength: {
									min: 5,
									max: 30,
									message: '密码长度大于5小于30'
								}
							}
						}
					}
				})

	});
</script>
</body>
</html>
